<template>
  <div class="report-list">
    <div class="rl-content white-card">
      <div class="search-box" ref="searchBar">
        <el-form
          :model="form"
          ref="form"
          size="medium"
          label-width="85px"
          class="demo-form"
        >
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="用户名称" prop="personName">
                <el-select
                  style="width: 100%"
                  v-model="personObj"
                  filterable
                  remote
                  clearable
                  value-key="personId"
                  :remote-method="getUserName"
                  placeholder="请输入用户名称进行搜索"
                  @change="handleSearch"
                  @clear="handleClearPersonName"
                >
                  <el-option
                    v-for="item in personNameOptions"
                    :key="item.personId"
                    :label="item.personName"
                    :value="item"
                  >
                    <span
                      >{{ item.personName }} (用户ID：{{ item.personId }})</span
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="职途卡号" prop="cardNo">
                <el-input
                  style="width: 100%"
                  type="text"
                  v-model="form.cardNo"
                  placeholder="请输入完整的职途卡号"
                  @keyup.enter.native="handleSearch"
                  @clear="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="顾问名称" prop="consultantId">
                <el-select
                  style="width: 100%"
                  v-model="form.consultantId"
                  filterable
                  remote
                  clearable
                  :remote-method="getConsultantName"
                  placeholder="请输入顾问名称进行搜索"
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in consultantNameOptions"
                    :key="item.consultantId"
                    :label="item.consultantName"
                    :value="item.consultantId"
                  >
                    <span
                      >{{ item.consultantName }} (ID:{{
                        item.consultantId
                      }})</span
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="手机号" prop="telephone">
                <el-input
                  clearable
                  style="width: 100%"
                  v-model.trim="form.telephone"
                  placeholder="请输入用户手机号进行搜索"
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="任务状态" prop="consultantName">
                <el-select
                  style="width: 100%"
                  v-model="form.bindFlag"
                  placeholder="请选择任务状态"
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in taskStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @change="handleSearch"
                  >
                    <span>{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="退役军人" prop="isSoldier">
                <el-select
                  style="width: 100%"
                  v-model="form.onlySoldier"
                  placeholder="是否为退役军人"
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in isSoldierOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @change="handleSearch"
                  >
                    <span>{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="项目名称" prop="cardType">
                <el-select
                  style="width: 100%"
                  v-model="form.cardType"
                  placeholder="请选择项目名称"
                  filterable
                  clearable
                  @change="handleCardTypeChange"
                >
                  <el-option
                    v-for="item in cardTypeList"
                    :key="item.value"
                    :label="item.cardName"
                    :value="item.cardType"
                  >
                    <span>{{ item.cardName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="激活时间" prop="consultantName">
                <el-date-picker
                  style="width: 100%"
                  v-model="form.activeTime"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  type="daterange"
                  range-separator="-"
                  valueFormat="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="handleSearch"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col
              :xs="12"
              :sm="12"
              :md="8"
              :lg="6"
              :xl="6"
            >
              <el-form-item label="数据类型">
                <el-select
                  style="width: 100%"
                  v-model="form.isTest"
                  placeholder="请选择数据类型"
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in isTestOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="包含案例">
                <el-select
                  style="width: 100%"
                  v-model="form.containCase"
                  placeholder="请选择是否包含案例"
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in isContainCases"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 额外的筛选条件 -->
            <template v-if="showSelectCondition">
              <template v-for="item in configObj.selectCondition">
                <el-col
                  v-if="getComponentType(item.componentType) == 1"
                  :xs="12"
                  :sm="12"
                  :md="8"
                  :lg="6"
                  :xl="6"
                  :key="item.setKey"
                >
                  <el-form-item :label="item.name">
                    <ComponentOne
                      :formItem="item"
                      @change="handleFormChange"
                    ></ComponentOne>
                  </el-form-item>
                </el-col>
              </template>
            </template>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label-width="20px">
                <el-button type="primary" size="small" @click="handleSearch"
                  >筛选</el-button
                >
                <el-button @click="handleReset" size="small">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="white-card table-wrap">
        <div class="operate-bar">
          <el-button
            plain
            round
            size="small"
            v-has="'export'"
            :loading="exportLoading"
            @click="handleBatchExport"
            >{{ exportLoading ? '导出中...' : '一键导出' }}</el-button
          >
          <el-button
            v-if="configObj.batchImportBtn && configObj.batchImportBtn.length"
            plain
            round
            size="small"
            v-has="'export'"
            @click="handleBatchImport"
            >一键导入</el-button
          >
          <el-button
            plain
            round
            size="small"
            v-has="'delete'"
            @click="handleBatchDelete"
            >批量删除</el-button
          >
          <el-button
            plain
            round
            size="small"
            :disabled="form.cardType == '' || multipleSelection.length == 0"
            @click="changeConsultant"
            >批量换绑顾问</el-button
          >
        </div>
        <div :style="{ height: tableHeight + 'px' }">
          <el-table
            :data="list"
            height="100%"
            v-loading="loading"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
            tooltip-effect="light"
            :header-cell-class-name="'header_name_style'"
          >
            <el-table-column type="selection" width="50"> </el-table-column>
            <el-table-column
              prop="personName"
              label="用户名称"
              min-width="100"
              show-overflow-tooltip
              style="color: red"
            ></el-table-column>
            <el-table-column
              prop="telephone"
              label="手机号"
              show-overflow-tooltip
              min-width="120"
            >
              <template slot-scope="scope">
                <div class="no-wrap" :title="scope.row.telephone">
                  {{ scope.row.telephone }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cardNo"
              label="卡号"
              min-width="100"
            ></el-table-column>
            <template v-if="showTableColumn">
              <el-table-column
                v-for="item in configObj.tableColumn"
                :key="item.key"
                :prop="item.key"
                :label="item.value"
                min-width="100"
                :show-overflow-tooltip="true"
              ></el-table-column>
            </template>
            <el-table-column
              prop="consultantName"
              label="负责顾问"
              min-width="90"
            ></el-table-column>
            <el-table-column
              prop="userRightList"
              label="当前服务任务状态"
              min-width="140"
            >
              <template slot-scope="scope">
                <el-popover
                  v-if="scope.row.currentName.value != '1'"
                  placement="top-start"
                  title=""
                  width="150"
                  trigger="hover"
                >
                  <div class="list-box">
                    <div
                      class="item"
                      v-for="(item, index) in scope.row.userRightList"
                      :key="index"
                    >
                      <!-- <span class="name">{{ item.rightName }}</span> -->
                      <span
                        :class="[
                          'name',
                          { unfinishColor: item.finishType == '0' },
                          { doingColor: item.finishType == '1' },
                          { finishColor: item.finishType == '2' }
                        ]"
                        >{{ item.rightName }}</span
                      >

                      <span
                        :class="[item.isActive ? 'isActive' : '']"
                        v-if="item.finishType == '0'"
                        ><elan-svg icon="unfinish"></elan-svg
                        ><span :class="['finish-type', 'unfinishColor']"
                          >未完成</span
                        ></span
                      >
                      <span
                        :class="[item.isActive ? 'isActive' : '']"
                        v-if="item.finishType == '1'"
                        ><elan-svg icon="doing"></elan-svg
                        ><span :class="['finish-type', 'doingColor']"
                          >进行中</span
                        ></span
                      >
                      <span
                        :class="[item.isActive ? 'isActive' : '']"
                        v-if="item.finishType == '2'"
                        ><elan-svg icon="finish"></elan-svg
                        ><span :class="['finish-type', 'finishColor']"
                          >已完成</span
                        ></span
                      >
                      <!-- <span :class="[item.isActive ? 'isActive' : '']"><elan-svg icon="unfinish"></elan-svg>{{
                      item.finishType == "0"
                      ? "未完成"
                      : item.finishType == "1"
                        ? "进行中"
                        : "已完成"
                    }}</span> -->
                    </div>
                  </div>
                  <div
                    slot="reference"
                    v-if="scope.row.currentName.value == '3'"
                    class="currentName-3"
                  >
                    <i class="pointer">...&#x3e;</i>
                    <span class="name pointer">
                      <elan-svg icon="doing"></elan-svg>
                      {{ scope.row.currentName.name }}</span
                    >
                  </div>
                  <div
                    slot="reference"
                    v-if="
                      scope.row.currentName.value == '2' ||
                      scope.row.currentName.value == '4'
                    "
                    :class="[
                      `currentName-${scope.row.currentName.value}`,
                      'pointer'
                    ]"
                  >
                    <elan-svg
                      icon="unfinish"
                      v-if="scope.row.currentName.name === '未开始'"
                    ></elan-svg>
                    <elan-svg
                      icon="finish"
                      v-if="scope.row.currentName.name === '已完成'"
                    ></elan-svg>
                    <span style="margin-left: 4px">{{
                      scope.row.currentName.name
                    }}</span>
                  </div>
                </el-popover>
                <div
                  slot="reference"
                  v-if="scope.row.currentName.value == '1'"
                  :class="[
                    `currentName-${scope.row.currentName.value}`,
                    'pointer'
                  ]"
                >
                  <elan-svg
                    icon="unactive"
                    v-if="scope.row.currentName.name === '未激活'"
                  ></elan-svg>
                  <span style="margin-left: 4px">{{
                    scope.row.currentName.name
                  }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="rateScore"
              label="服务评价"
              min-width="150"
              header-align="center"
              align="center"
            >
              <template slot-scope="scope">
                <div class="no-wrap" :title="scope.row.rateScore">
                  {{
                    scope.row.rateScore ? scope.row.rateScore + '分' : '未评分'
                  }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="cardType"
              label="项目名称"
              show-overflow-tooltip
              min-width="130"
            >
              <template slot-scope="scope">
                <div
                  class="no-wrap"
                  :title="getProjectName(scope.row.cardType)"
                >
                  {{ getProjectName(scope.row.cardType) }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="activeTime" label="激活时间" min-width="150">
              <template slot-scope="scope">
                <div class="no-wrap" :title="scope.row.activeTime">
                  {{ scope.row.activeTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="personId"
              label="用户ID"
              min-width="100"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="stuNum"
              label="是否为退役军人"
              min-width="120"
            >
              <template slot-scope="scope">
                <div class="no-wrap">
                  {{ scope.row.isSoldier == '0' ? '否' : '是' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="240">
              <template slot-scope="scope">
                <div class="operation-button">
                  <el-button
                    v-has="'taskDetail'"
                    type="text"
                    v-if="scope.row.personId"
                    @click="handleTaskDetail(scope.row)"
                    >任务详情</el-button
                  >
                  <el-button
                    type="text"
                    v-if="scope.row.personId"
                    @click="changeConsultant(scope.row)"
                    >换顾问</el-button
                  >
                  <!-- <el-button
                    v-has="'taskDetail'"
                    type="text"
                    v-if="scope.row.fileList.length"
                    @click="handleCheckFile(scope.row)"
                    >查看</el-button
                  > -->
                  <el-button
                    v-has="'case'"
                    type="text"
                    @click="handleShowCase(scope.row)"
                    >案例</el-button
                  >
                  <!-- <el-button
                type="text"
                v-if="scope.row.consultantId && scope.row.personId"
                @click="handleUpload(scope.row)"
                >上传</el-button
              > -->
                  <el-button
                    v-has="'delete'"
                    type="text"
                    @click="handleDeleteOne(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager" v-if="list.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.sums"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
    <UploadFile
      :visible.sync="uploadVisible"
      :consultantId="currentConsultantId"
      :personId="currentPersonId"
      @refresh="getData"
    ></UploadFile>
    <FileList :visible.sync="fileListVisible" :list="fileList"></FileList>
    <TaskDetailDialog
      v-if="TaskDetailDialogVisible"
      :visible.sync="TaskDetailDialogVisible"
      :selectedRow="selectedRow"
    />
    <CaseDialog
      :visible.sync="caseVisible"
      :selectedRow="selectedRow"
    ></CaseDialog>
    <ChangeConsultant
      v-if="changeConsultantVisible"
      :visible.sync="changeConsultantVisible"
      :selectedRow="selectedRow"
      :cardType="form.cardType"
      :personIdStrList="personIdStrList"
      @refresh="getData"
    ></ChangeConsultant>
    <ImportDialog
      :visible.sync="importVisible"
      :typeList="configObj.batchImportBtn"
      :configObj="configObj"
      :cardType="form.cardType"
      @refresh="handleSearch"
    ></ImportDialog>
    <ExportDialog
      :visible.sync="exportVisible"
      :typeList="configObj.batchExportBtn"
      :configObj="configObj"
      :cardType="form.cardType"
      @exportAll="exportAll"
    ></ExportDialog>
  </div>
</template>

<script>
import {
  getAllUserList,
  getPersonList,
  consultantSearch,
  getProjectList,
  deletePerson,
  getTaskList,
  applicationList,
  telephoneSearch,
  offlineConf
} from '@/api/index';
import Axios from 'axios';
import { mapGetters } from 'vuex';
import { apiJava } from '@/api/root';
import { componentTypeMap } from '@/utils/dataMap';
import { downLoadFile } from '@/utils/downLoadFile';
import page from '@/mixin/page';
import UploadFile from './components/UploadFile.vue';
import FileList from './components/FileList.vue';
import ExportDialog from './components/ExportDialog.vue';
import ImportDialog from './components/ImportDialog.vue';
import TaskDetailDialog from './components/TaskDetailDialog.vue';
import CaseDialog from './components/CaseDialog.vue';
import ChangeConsultant from './components/changeConsultant.vue';
import ComponentOne from './components/OfflineRegisterInfo/ComponentOne';

export default {
  components: {
    UploadFile,
    FileList,
    TaskDetailDialog,
    CaseDialog,
    ChangeConsultant,
    ImportDialog,
    ExportDialog,
    ComponentOne
  },
  mixins: [page],
  data() {
    return {
      personIdStrList: [],
      changeConsultantVisible: false,
      TaskDetailDialogVisible: false,
      loading: false,
      tableHeight: 'auto',
      list: [],
      multipleSelection: [],
      form: {
        personId: '',
        consultantId: '',
        rightId: '',
        activeTime: [],
        cardType: '',
        telephone: '',
        appId: '',
        bindFlag: 2,
        onlySoldier: '0',
        isTest: 0,
        containCase: 0
      },
      personObj: null,
      taskStatusOptions: [
        { label: '全部', value: 2 },
        { label: '已激活', value: 0 },
        { label: '未激活', value: 1 }
      ],
      isSoldierOptions: [
        { label: '全部', value: '0' },
        { label: '是', value: '1' }
      ],
      // 远程排序
      sortType: '',
      sortField: '',
      rightList: [],
      projectTypeList: [],
      uploadVisible: false,
      fileListVisible: false,
      caseVisible: false,
      exportLoading: false,
      showSelectCondition: false,
      showTableColumn: false,
      currentConsultantId: '',
      currentPersonId: '',
      fileList: [],
      personNameOptions: [],
      telephoneOptions: [],
      consultantNameOptions: [],
      projectList: [],
      applyList: [],
      cardTypeList: [],
      selectedRow: {},
      isTestOptions: [
        { label: '正式数据', value: 0 },
        { label: '测试数据', value: 1 },
        { label: '全部', value: 2 }
      ],
      isContainCases: [
        { label: '有案例', value: 1 },
        { label: '全部', value: 0 }
      ],
      configObj: {},
      uploadAction: 'https://upload.yl1001.com/upload/files/save',
      accept: '.xlsx,.xls',
      retryCount: 0,
      timer: null,
      MAX_RETRY_TIMES: 10,
      exportVisible: false,
      importVisible: false
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date('2023-09-01');
          const date2 = new Date(
            new Date().getFullYear() +
              '-' +
              ('0' + (new Date().getMonth() + 1)).substr(-2) +
              '-' +
              ('0' + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        }
      };
    },
    ...mapGetters({
      refreshDetailData: 'GET_REFRESH_DETAIL_DATA'
    })
  },
  watch: {
    refreshDetailData() {
      this.handleSearch();
    }
  },
  async created() {
    window.addEventListener('resize', this.getHeight);
    this.applicationListFn();
    await this.getProjectListFn();
    this.getData();
    this.getTaskList();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight);
  },
  methods: {
    handleFormChange(key, val) {
      const currentValue = this.configObj.selectCondition.find(
        (item) => item.setKey == key
      );
      const temp = {
        setKey: key,
        setValue: JSON.parse(val),
        componentType: currentValue.componentType
      };
      // 额外的筛选条件要塞到offlineCondition里
      if (!this.form.offlineCondition) {
        this.$set(this.form, 'offlineCondition', []);
      } else {
        // 如果之前就有了这个字段，就先去掉它
        const index = this.form.offlineCondition.findIndex(
          (item) => item.setKey == key
        );
        if (index >= 0) {
          this.form.offlineCondition.splice(temp, 1);
        }
      }
      temp.setValue && this.form.offlineCondition.push(temp);
      this.handleSearch();
    },
    handleBatchExport() {
      if (
        this.configObj.batchExportBtn &&
        this.configObj.batchExportBtn.length
      ) {
        this.exportVisible = true;
      } else {
        this.exportAll();
      }
    },
    beforeUpload(file) {
      const fileSuffix = file.name.substring(file.name.lastIndexOf('.') + 1);
      const whiteList = ['pdf', 'doc', 'docx', 'xls', 'xlsx'];
      if (whiteList.indexOf(fileSuffix) === -1) {
        this.$msg('请上传正确的文本格式文件，如.xls, .xlsx');
        return false;
      }
    },
    handleBatchImport() {
      if (
        this.configObj.batchImportBtn &&
        this.configObj.batchImportBtn.length
      ) {
        this.importVisible = true;
      }
    },
    // 获取下拉框数据以及筛选数据
    async offlineConfFn() {
      this.configObj = {};
      const params = {
        cardType: this.form.cardType
      };
      const res = await offlineConf(params);
      if (res.code == 200 && res.data.length > 0) {
        this.configObj = res.data[0];
        // 额外的筛选条件
        if (
          this.configObj.selectCondition &&
          this.configObj.selectCondition.length > 0
        ) {
          this.configObj.selectCondition.forEach((item) => {
            item.setKey = item.field;
            if (item.componentType == 'select') {
              item.customData = item.option;
            }
            if (item.componentType == 'datePickerRange') {
              this.$set(item, 'setValue', []);
              this.$set(this.form, item.field, []);
            } else {
              this.$set(item, 'setValue', '');
              this.$set(this.form, item.field, '');
            }
          });
          this.showSelectCondition = true;
        } else {
          this.showSelectCondition = false;
        }
        // 额外的table上的字段
        if (
          this.configObj.tableColumn &&
          this.configObj.tableColumn.length > 0
        ) {
          this.showTableColumn = true;
        } else {
          this.showTableColumn = false;
        }
      } else {
        this.showSelectCondition = false;
        this.showTableColumn = false;
      }
    },
    getTelephoneSearch(telephone) {
      const params = {
        telephone,
        pageNo: 1,
        pageSize: 30
      };
      telephoneSearch(params).then((res) => {
        if (res.code == 200) {
          this.telephoneOptions = res.data;
        }
      });
    },
    applicationListFn() {
      applicationList().then((res) => {
        if (res.code == 200) {
          this.localAppList = res.data;
          let temp = [];
          res.data.forEach((item) => {
            if (Array.isArray(item.cardTypeList)) {
              temp = temp.concat(item.cardTypeList);
            }
          });
          this.cardTypeList = temp;
          this.cardTypeList.reverse();
        }
      });
    },
    getHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.searchBar.offsetHeight - 210;
    },
    async getDefaultTime() {
      const startTime = this.getCurrentMonthFirst();
      const endTime = this.getCurrentMonthLast();
      this.form.activeTime = [startTime, endTime];
    },
    //设置默认日期
    getCurrentMonthFirst() {
      // // 获取当年1月1号
      // var date = new Date();
      // date.setDate(1);
      // return date.getFullYear() + "-01" + "-01";
      return '2023-09-01';
    },
    getCurrentMonthLast() {
      // 获取当天日期
      var date = new Date();
      var month = parseInt(date.getMonth() + 1);
      var day = date.getDate();
      if (month < 10) month = '0' + month;
      if (day < 10) day = '0' + day;
      return date.getFullYear() + '-' + month + '-' + day;
    },
    async getTaskList() {
      const res = await getTaskList();
      this.rightList = res.data;
    },
    handleTaskDetail(row) {
      this.$store.commit('SET_PERSON_ID', row.personId);
      this.$store.commit('SET_CONSULTANT_ID', row.consultantId);
      this.selectedRow = row;
      this.TaskDetailDialogVisible = true;
    },
    changeConsultant(row) {
      if (row) {
        this.selectedRow = row;
        this.changeConsultantVisible = true;
      } else {
        this.selectedRow = null;
        this.changeConsultantVisible = true;
      }
    },
    async getPersonId() {
      const personName = this.form.personName;
      if (!personName) {
        return;
      }
      const temp = this.personNameOptions.find(
        (item) => item.personName == personName
      );
      if (temp) {
        this.form.personId = temp.personId;
      }
    },
    getCurrentRightName(item) {
      if (item.personId == '0' || !item.personId) {
        return {
          name: '未激活',
          value: '1'
        };
      }
      const userRightList = item.userRightList;

      const unStartStatusArray = [];
      userRightList.forEach((item) => {
        if (item.finishType == 0) {
          unStartStatusArray.push(item);
        }
      });
      if (unStartStatusArray.length == userRightList.length) {
        return {
          name: '未开始',
          value: '2'
        };
      }

      const finishStatusArray = [];
      userRightList.forEach((item) => {
        if (item.finishType == '2') {
          finishStatusArray.push(item);
        }
      });
      if (finishStatusArray.length == userRightList.length) {
        return {
          name: '已完成',
          value: '4'
        };
      }
      const tempArr = [];
      userRightList.forEach((item) => {
        if (item.finishType == 2 || item.finishType == 1) {
          tempArr.push(item);
        }
      });
      if (tempArr.length) {
        return {
          name: tempArr[tempArr.length - 1].rightName,
          value: '3'
        };
      }
    },
    getProjectName(cardType) {
      const temp = this.projectList.find((item) => item.cardType == cardType);
      if (temp) {
        return temp.cardName;
      } else {
        return '未知应用方';
      }
    },
    handleBatchDelete() {
      if (!this.multipleSelection.length) {
        this.$message.warning('请先选择需要删除的用户');
        return;
      }
      let temp = [];
      this.multipleSelection.forEach((item) => {
        temp.push(item.cardNo);
      });
      const params = {
        cardNo: temp.join(',')
      };
      this.$confirm('此操作将永久删除已选择人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deletePersonFn(params);
        })
        .catch(() => {});
    },
    handleCheckFile(item) {
      this.fileList = item.fileList;
      this.fileListVisible = true;
    },
    handleShowCase(item) {
      this.selectedRow = item;
      this.caseVisible = true;
    },
    handleUpload(item) {
      const { personId, consultantId } = item;
      this.currentConsultantId = consultantId;
      this.currentPersonId = personId;
      this.uploadVisible = true;
    },
    handleDeleteOne(item) {
      this.$confirm('此操作将永久删除该人员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            cardNo: [item.cardNo].join(',')
          };
          this.deletePersonFn(params);
        })
        .catch(() => {});
    },
    deletePersonFn(params) {
      deletePerson(params).then((res) => {
        if (res.code == 200) {
          this.$message.success('删除成功');
          this.getData();
        } else {
          this.$message.error('删除失败');
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.personIdStrList = this.multipleSelection;
    },
    getUserName(personName) {
      if (personName) {
        let params = {
          personName
        };
        getPersonList(params)
          .then((res) => {
            if (res.code == 200) {
              this.personNameOptions = res.data;
            } else {
              this.$message.error('获取用户列表失败');
            }
          })
          .catch(() => {
            this.$message.error('获取用户列表失败');
          })
          .finally(() => {});
      }
    },
    getConsultantName(matchName) {
      if (matchName) {
        let params = {
          matchName
        };
        consultantSearch(params)
          .then((res) => {
            if (res.code == 200) {
              this.consultantNameOptions = res.data;
            } else {
              this.$message.error('获取顾问列表失败');
            }
          })
          .catch(() => {})
          .finally(() => {});
      }
    },
    async getProjectListFn() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.projectList = res.data;
        }
      });
    },
    exportAll() {
      this.exportLoading = true;
      let params = {
        ...this.form,
        activeStartTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[0] + ' 00:00:00'
            : '',
        activeEndTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[1] + ' 23:59:59'
            : '',
        pageNo: 1,
        pageSize: 3000,
        isTest: 0
      };
      Axios({
        method: 'post',
        url: apiJava + '/api-career/zt/list/export',
        data: params,
        responseType: 'arraybuffer',
        headers: {},
        timeout: '60000'
      })
        .then((res) => {
          downLoadFile(res, '职途用户数据.xlsx');
        })
        .catch(() => {
          this.$message.error('导出失败');
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    // 排序
    handleSortChange(val) {
      if (val && val.order == 'ascending') this.sortType = 'asc';
      else if (val && val.order == 'descending') this.sortType = 'desc';
      this.sortField = val.prop;
      this.page.currentPage = 1;
      this.getData();
    },
    getData() {
      this.loading = true;
      let params = {
        ...this.form,
        activeStartTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[0] + ' 00:00:00'
            : '',
        activeEndTime:
          Array.isArray(this.form.activeTime) && this.form.activeTime.length > 1
            ? this.form.activeTime[1] + ' 23:59:59'
            : '',
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize
      };
      getAllUserList(params)
        .then((res) => {
          this.loading = false;
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.currentName = this.getCurrentRightName(item);
              const tempArr = [];
              item.userRightList.forEach((item) => {
                if (item.finishType == 2) {
                  tempArr.push(item);
                }
              });
              if (tempArr.length) {
                tempArr[tempArr.length - 1].isActive = true;
              }
            });
            // 处理线下服务数据的额外字段
            res.data.forEach((item) => {
              if (item.offlineData) {
                Object.keys(item.offlineData).forEach((key) => {
                  item[key] = item.offlineData[key];
                });
              }
            });
            this.list = res.data;
            this.page.sums = res.pageparam.sums;
          } else {
            this.loading = false;
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    async handleCardTypeChange() {
      await this.offlineConfFn();
      this.handleSearch();
    },
    async handleSearch() {
      if (this.form.telephone) {
        const isPhoneValid = /^1[3456789]\d{9}$/.test(this.form.telephone);
        if (!isPhoneValid) {
          this.$message.error('请输入正确的手机号码');
          return;
        }
      }
      this.$set(this.page, 'currentPage', 1);
      this.form.personId = this.personObj?.personId;
      this.getData();
    },
    handleReset() {
      this.form.consultantId = '';
      this.form.cardNo = '';
      this.form.telephone = '';
      this.form.activeTime = [];
      this.form.personName = '';
      this.form.personId = '';
      this.personObj = null;
      this.form.consultantName = '';
      this.form.cardType = '';
      this.form.onlySoldier = '0';
      this.form.rightId = '';
      this.form.appId = '';
      this.form.bindFlag = 2;
      this.form.isTest = 0;
      this.form.containCase = 0;
      this.form.offlineCondition = [];
      this.configObj = {};
      this.handleSearch();
    },
    handleClearPersonName() {
      this.form.personName = '';
      this.form.personId = '';
      this.personObj = null;
      this.getData();
    },
    getComponentType(type) {
      return componentTypeMap[type];
    }
  }
};
</script>

<style lang="scss" scoped>
.white-card {
  /deep/ .header_name_style {
    font-size: 14px;
    font-family: PingFang-SC, PingFang-SC;
    font-weight: bold;
    color: #6c7481;
  }
}

.pointer {
  cursor: pointer;
}
.report-list {
  background: url('../../assets/images/bigBg.png') no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .rl-content {
    margin: 12px 12px 0 12px;
    .search-box {
      padding: 22px 24px 0 12px;
      border-bottom: 1px solid #e8e8e8;
    }
    .table-wrap {
      box-shadow: 0 0 0 0;
      overflow: hidden;
      .operate-bar {
        display: flex;
        margin-bottom: 12px;
        /deep/ .el-button--small.is-round {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #555555;
        }
      }

      .currentName-1 {
        color: #ba4bee;
      }

      .currentName-2 {
        color: #999999;
      }

      .currentName-3 {
        color: #666;

        .name {
          color: #6a4aff;
          padding-left: 4px;
          font-weight: 400;
        }
      }

      .currentName-4 {
        color: #0cb354;
      }
    }

    .el-dropdown {
      margin-right: 12px;
    }
  }
}

.list-box {
  .item {
    display: flex;
    justify-content: space-between;
    color: #999;
    padding: 2px 0;

    .isActive {
      color: #1890ff;
    }
    .finish-type {
      margin-left: 5px;
    }
    .unfinishColor {
      color: #999999;
    }
    .doingColor {
      color: #6a4aff;
    }
    .finishColor {
      color: #000000;
    }
  }
}

/deep/ .el-col-12 {
  width: 25%;
}

/deep/ .el-range-editor--small .el-range-separator {
  line-height: 24px;
  font-size: 13px;
  width: 25px;
}

/deep/ .el-table__fixed-right td:not(.is-hidden) .cell {
  padding: 0;
  display: flex;
  justify-content: center;
}

.no-wrap {
  // max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.operation-button {
  /deep/ .el-button--text {
    font-weight: 400;
  }
}
</style>
